<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--<html>--%>
<%--<head>--%>
    <%--<title>用户列表</title>--%>
    <%--<!-- 引入样式 -->--%>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<%--</head>--%>
<%--<body>--%>
<%--<!-- 引入组件库 -->--%>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui@2.4.7/lib/index.js"></script>
<div id="app">

    <template>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="no"
                    width="500"
                    label="订单编号">
            </el-table-column>
            <el-table-column
                    prop="userName"
                    label="下单用户"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="dateStr"
                    label="下单时间"
                    width="180">
            </el-table-column>
        </el-table>
    </template>

</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            tableData: null,
        },
        methods: {
            initData: function(){
                var self = this;
                $.ajax({
                    url: '/manage/order?action=list',
                    type: 'GET',
                    dataType: 'JSON',
                    async: false,
                    success: function(data){
                        if(data.status == 0){
                            self.tableData = data.data;
                        }
                    },
                    error: function(e){
                        console.log(e);
                    }
                });
            }
        },
        mounted: function(){
            this.initData();
        }
    });
</script>
<%--</body>--%>
<%--</html>--%>
